home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / DHTML - Mouseover Images / dom-rollover.izs < prev    next >
Text File  |  2005-09-01  |  3KB  |  98 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>DOM Image Rollover
  4. <!/TITLE>
  5.  
  6. <!BROWSER>FF1+ IE5+ Opr7+<!/BROWSER>
  7.  
  8. <!DESCRIPTION>Image rollovers represent the classic and "timeless" JavaScript effect. Well, this DOM script makes the process of adding them as simple as can be, by allowing you to apply a rollover to any image through just the insertion of a custom attribute (hsrc) inside the image's tag.
  9. <!/DESCRIPTION> 
  10.  
  11. <!CATEGORY>mouseover images<!/CATEGORY>
  12.  
  13. <!SCRIPT>
  14. <!-- START OF SCRIPT -->
  15. <!-- Step 1: Insert the below script into the <head> section of your page: -->
  16. <script type="text/javascript">
  17.  
  18. /****************************************************
  19. *            DOM Image rollover:
  20. *        by Chris Poole
  21. *        http://chrispoole.com
  22. *               Script featured on http://www.dynamicdrive.com
  23. *        Keep this notice intact to use it :-)
  24. ****************************************************/
  25.  
  26. function init() {
  27.   if (!document.getElementById) return
  28.   var imgOriginSrc;
  29.   var imgTemp = new Array();
  30.   var imgarr = document.getElementsByTagName('img');
  31.   for (var i = 0; i < imgarr.length; i++) {
  32.     if (imgarr[i].getAttribute('hsrc')) {
  33.         imgTemp[i] = new Image();
  34.         imgTemp[i].src = imgarr[i].getAttribute('hsrc');
  35.         imgarr[i].onmouseover = function() {
  36.             imgOriginSrc = this.getAttribute('src');
  37.             this.setAttribute('src',this.getAttribute('hsrc'))
  38.         }
  39.         imgarr[i].onmouseout = function() {
  40.             this.setAttribute('src',imgOriginSrc)
  41.         }
  42.     }
  43.   }
  44. }
  45. onload=init;
  46.  
  47. </script>
  48. <!-- Step 2: Here's where the fun begins. To now give any image a rollover effect, just insert the custom HTML attribute "hsrc" into the image's tag, using the swapped image's path as the attribute's value: -->
  49. <img src="before.gif" hsrc="after.gif"><br>
  50.  
  51. <a href="#"><img src="on.gif" hsrc="myimages/off.gif"></a>
  52. <!-- END OF SCRIPT -->
  53. <!/SCRIPT>
  54.  
  55. <!PREVIEW>
  56. <!-- START OF SCRIPT -->
  57. <!-- Step 1: Insert the below script into the <head> section of your page: -->
  58. <script type="text/javascript">
  59.  
  60. /****************************************************
  61. *            DOM Image rollover:
  62. *        by Chris Poole
  63. *        http://chrispoole.com
  64. *               Script featured on http://www.dynamicdrive.com
  65. *        Keep this notice intact to use it :-)
  66. ****************************************************/
  67.  
  68. function init() {
  69.   if (!document.getElementById) return
  70.   var imgOriginSrc;
  71.   var imgTemp = new Array();
  72.   var imgarr = document.getElementsByTagName('img');
  73.   for (var i = 0; i < imgarr.length; i++) {
  74.     if (imgarr[i].getAttribute('hsrc')) {
  75.         imgTemp[i] = new Image();
  76.         imgTemp[i].src = imgarr[i].getAttribute('hsrc');
  77.         imgarr[i].onmouseover = function() {
  78.             imgOriginSrc = this.getAttribute('src');
  79.             this.setAttribute('src',this.getAttribute('hsrc'))
  80.         }
  81.         imgarr[i].onmouseout = function() {
  82.             this.setAttribute('src',imgOriginSrc)
  83.         }
  84.     }
  85.   }
  86. }
  87. onload=init;
  88.  
  89. </script>
  90. <!-- Step 2: Here's where the fun begins. To now give any image a rollover effect, just insert the custom HTML attribute "hsrc" into the image's tag, using the swapped image's path as the attribute's value: -->
  91. <img src="before.gif" hsrc="after.gif"><br>
  92.  
  93. <a href="#"><img src="on.gif" hsrc="myimages/off.gif"></a>
  94.  
  95. <!-- END OF SCRIPT -->
  96. <!/PREVIEW>
  97.  
  98. <!RELATED>NONE<!/RELATED>